<template>
  <div class="app-item-contain">
    <el-card
      class="user-index-info-contain user-change-password"
      shadow="never"
    >
      <info-menu url="/user/passwordChange" />

      <div class="right">
        <el-form
          :model="form"
          ref="form"
          label-width="100px"
          v-loading="formLoading"
          :rules="rules"
        >
          <el-form-item label="旧密码：" prop="oldPassword" required>
            <el-input v-model="form.oldPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword" required>
            <el-input v-model="form.newPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmPassword" required>
            <el-input v-model="form.confirmPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm"
              class="wdd-primary-button-color"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import InfoMenu from './components/info-menu.vue';
import { changePassword } from '@/api/user';
import { rsaEncryptStr } from '@/utils';
import useStore from '@/store';
import { getCurrentUser } from '@/api/user';

const { user } = useStore();

export default {
  components: { InfoMenu },
  data() {
    let checkPassword = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      },
      userInfo: {},
      formLoading: false,
      rules: {
        oldPassword: [{ required: true, message: '请输入旧密码' }],
        newPassword: [
          { required: true, message: '请输入新密码' },
          {
            pattern:
              /(?!.*(shensi|sdses|jnny|jnrl|jnrd|sdgh|nygc|ntjt|cszm))(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[`@$!%*?&#^`])[A-Za-z\d@$!%*?&#^]{8,18}$/,
            message:
              '新密码不能包含shensi|sdses|jnny|jnrl|jnrd|sdgh|nygc|ntjt|cszm敏感词必须包含至少一个大写字母、至少包含一个小写字母、至少包含一个数字、至少包含一个特殊字符如-!<>@#$%&*()且密码长度应在8-18位之间',
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码' },
          { validator: checkPassword }
        ]
      }
    };
  },
  created() {
    this.infoLoad();
  },
  methods: {
    //加载用户信息
    infoLoad() {
      getCurrentUser().then(re => {
        this.userInfo = re.response;
      });
    },
    submitForm() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formLoading = true;
          let params = {
            userName: this.userInfo.userName,
            oldPassword: rsaEncryptStr(
              import.meta.env.VITE_APP_PAIR_ONE_PUBLIC_KEY,
              this.form.oldPassword
            ),
            newPassword: rsaEncryptStr(
              import.meta.env.VITE_APP_PAIR_ONE_PUBLIC_KEY,
              this.form.newPassword
            ),
            confirmPassword: rsaEncryptStr(
              import.meta.env.VITE_APP_PAIR_ONE_PUBLIC_KEY,
              this.form.confirmPassword
            )
          };
          changePassword(params)
            .then(data => {
              if (data.code === 1) {
                this.$message.success(data.message);
                user.logout().then(() => {
                  _this.$router.push(`/login`);
                });
              } else {
                this.$message.error(data.message);
              }
            })
            .finally(() => {
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
